<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ECharts</title>
		<!-- 引入刚刚下载的 ECharts 文件 -->
		<script src="../lib/echarts.min.js"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
		<div id="main" style="width: 700px; height: 400px"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '2021全学科薪资走势',
				},
				xAxis: {
					type: 'category',
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
					axisLine: {
						lineStyle: {
							type: 'dashed',
							color: '#d3d3d3',
						},
					},
					axisLabel: {
						color: 'balck',
					},
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed',
						},
					},
				},
				// 提示框
				tooltip: {
					show: true,
				},
				series: [
					{
						data: [820, 932, 901, 934, 1290, 1330, 1320, 1320, 1320, 1320, 1320, 1320],
						type: 'line',
						// 圆圈
						smooth: true,
						symbolSize: 9,
						lineStyle: {
							width: 5,
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#aed4ff', // 0% 处的颜色
									},
									{
										offset: 0.6,
										color: '#fff', // 100% 处的颜色
									},
								],
								global: false, // 缺省为 false
							},
						},
					},
				],
				grid: {
					// 设置上下左右的间隙
					top: '10%',
					left: '10%',
					right: '10%',
					bottom: '10%',
				},
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>
</html>
